<script setup lang="ts">
import { onMounted, shallowRef } from 'vue'
import fullpage from 'fullpage.js'

const id = `full-page-${Date.now()}`

const fullPageInstance = shallowRef()

const activeIndex = ref(0)

onMounted(() => {
  nextTick(() => {
    fullPageInstance.value = new fullpage(`#${id}`, {
    // licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
      navigation: true,
      navigationPosition: 'right',
      // scrollBar: false,
      // scrollOverflow: true,
      afterRender() {
        nextTick(() => {
          if (fullPageInstance.value)
            fullPageInstance.value.silentMoveTo(1)
        })
      },
      afterLoad() {
        if (fullPageInstance.value) {
          const section: any = fullPageInstance.value.getActiveSection()
          activeIndex.value = section.index()
        }

      // activeIndex.value = section.index
      },
    })
  })
})

onBeforeUnmount(() => {
  if (fullPageInstance.value)
    fullPageInstance.value.destroy('all')
})

function handleBack() {
  fullPageInstance.value.moveTo(1)
}
</script>

<template>
  <div :id="id">
    <slot name="default" />
    <FullPageItem class="fp-auto-height">
      <TheFooter />
    </FullPageItem>
  </div>
  <BackTop :active-index="activeIndex" @back="handleBack" />
</template>

<style>
#fp-nav ul li a span,
	.fp-slidesNav ul li a span{
		@apply bg-primary;
	}

  .fp-watermark {
    display: none;
  }

.fp-overflow::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.fp-overflow {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
